import React, { useState } from 'react'
import { View } from '@tarojs/components'
import { AtDrawer, AtAvatar, AtTag, AtInput, AtButton } from 'taro-ui'
import { request } from '../../utils/request'
import { useRequest } from 'ahooks'
import styles from './index.module.less'
import { User } from './userDetail'

const authFunc = (telephone) => {
  return request('POST', '/app/telephone', { telephone })
}

const AuthDetail: React.FC<{
  isShow: boolean,
  onClose: () => void,
  refresh: () => void
  user: User
}> = ({ isShow, onClose, user, refresh }) => {
  const [telephone, setTelephone] = useState('')
  const auth = useRequest(authFunc, {
    manual: true,
    onSuccess: () => {
      refresh()
    }
  })
  return (
    <View>
      <AtDrawer
        show={isShow}
        mask
        width="260px"
        onClose={onClose}
      >
        <View className={styles.User}>
          {user ? <>
            <AtAvatar size="large" circle image={user.picture}></AtAvatar>
            <View>{user.username} <AtTag className={styles.userTag} circle size="small" active={true}>{user.userTypeValue}</AtTag></View>
            <View>{user.telephone}</View>
          </>
            : <View> <AtInput
              name="telephone"
              border={false}
              title='手机'
              type='phone'
              placeholder='手机'
              value={telephone}
              onChange={(e) => setTelephone(e)}
            /></View>
          }
        </View>
        {!user && <View style={{ display: "inline-block", marginLeft: '14px' }}><AtButton type='primary' size={'small'} loading={auth.loading} onClick={() => auth.run(telephone)} >绑 定</AtButton ></View>}
      </AtDrawer>
    </View>
  )
}

export default AuthDetail